<template>
	<view>
		<view class="topic-img">
			<image :src="item.titlepic" mode="aspectFill" lazy-load></image>
		</view>
		
		<!-- 话题信息 -->
		
		<view class="topic-info ">
			<view class="topic-info-top u-f-ac">
				
					<image :src="item.titlepic" mode="widthFix" lazy-load></image>
					<view>{{item.title}}</view>
			</view>
			<view class="topic-info-center u-f-ac">
				<view>动态：{{item.totalnum}}</view>
				<view>今日：{{item.todaynum}}</view>
			</view>
			<view class="topic-info-foot">
				
				{{item.desc}}
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		props:{
			item:Object
		}
	}
</script>

<style scoped>
	.topic-img{
		width: 100%;
		height: 300upx;
		overflow: hidden;
		position: relative;
		}
		.topic-img image{
			width: 100%;
			position: absolute;
			filter: blur(8px);/*模糊度*/
		}
		.topic-info{
			padding: 0 20upx;
		}
		.topic-info-top{
			position: relative;
		}
		.topic-info-top>image{
			width: 200upx;
			height: 180upx!important;
			border-radius: 20upx;
			position: absolute;
			top: -78upx;
		}
		.topic-info-top>view{
			flex: 1;
			font-size: 35upx;
			margin-left: 220upx;
		}
		.topic-info-center{
			padding: 40upx 0 20upx 0;
			
			
		}
		.topic-info-center>view{
		color: #cdcdcdcd;
			
			
		}
		.topic-info-foot{
			font-size: 35upx;
			color: #888888;
		
		}
</style>
